<html>
<head>
    <meta name="viewport" content="width=device-width,user-scale=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>float</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="/index.js"></script>
<link rel="manifest" href="/manifest.json" />
<style>
    * {
        padding: 0;
        margin: 0;
    }

    @font-face {
        font-family: "iconfont";
        src: url("./img/iconfont.svg") format("svg"),
        url("./img/iconfont.eot") format("eot"),
        url("./img/iconfont.woff") format("woff"),
        url("./img/iconfont.woff2") format("woff2"),
        url("./img/iconfont.ttf") format("truetype");
    }

    header, footer {
        width: 100vw;
        height: 50px;
        color: #9C9C9C;
    }

    header {
        position: fixed;
        top: 0;
        background: #F2F2F2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        box-sizing: border-box;
    }

    footer {
        position: fixed;
        bottom: 0;
        background: #FFFFFF;
        display: flex;
        padding: 2px 0;
    }

    main {
        height: 100vh;
        width: 100vw;
        padding: 50px 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    main menu {
        width: 100vw;
        height: 30px;
        flex-shrink: 0;
        overflow-x: scroll;
        overflow-y: hidden;
        display: flex;
        background: #F2F2F2;
        box-shadow: gray 1px 0 5px;
    }

    main section {
        flex: 1;
        display: flex;
        background: #F5F5F5;
        flex-direction: column;
        align-items: center;
    }
    menu div {
        height: 30px;
        padding: 0 10px;
        text-align: center;
    }
    menu span {
        font-size: 15px;
        line-height: 27px;
        white-space: nowrap;
        color: #747474;
        display: block;
        box-sizing: border-box;
    }

    .active {
        color: #FF6B00;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: #FF6B00;
    }

    .icon {
        font-family: "iconfont";
        font-size: 20px;
    }

    .logo {
        color: #FF6B00;
    }

    .me {
        color: #868686;
    }
    .search {
        flex:1;
        height: 30px;
        margin: 0 10px;
        border-style: none;
        padding-left: 30px;
    }

    .btnItems {
        display: flex;
        flex-direction: column;
        flex: 1;
        align-items: center;
        justify-content: center;
    }

    .btnActive {
        color: #FF6B00;
    }

    img{
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }


    section img {
        width: 100vw;
        box-sizing: border-box;
    }

    #contentBox{
        width: 100vw;
        display: flex;
        flex-direction: column;
        background: white;
        flex-shrink: 0;
    }

    .row {
        display: flex;
        justify-content: space-evenly;
    }

    .rowItem {
        flex: 1 0;
        width: 20vw;
    }

    .mobile {
        margin-top: 3px;
        display: flex;
        width: 100vw;
    }
    .mobileItem {
        display: flex;
        flex-direction: column;
        width: 50vw;
        padding-left: 2px;
    }
</style>
<body>
    <div id="app">
        <header>
            <span class="icon logo">&#xe641;</span>
            <input type="text" class="search"/>
            <span class="icon me">&#xe639;</span>
        </header>
        <main>
            <menu>
                <div v-for="item in menuItems" @click="selectItem(item.index)">
                    <span :class="{active:item.index==index}">{{item.name}}</span>
                </div>

            </menu>
            <section>
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c163e2f870268a4188def2dc8e33feb0.jpg?thumb=1&w=720&h=360"/>
                <div id="contentBox">
                    <div class="row" class="rowItem">
                        <div class="rowItem">
                            <img src="https://i8.mifile.cn/v1/a1/290976f3-acac-8a62-7e5c-a19985a6414b.webp" />
                        </div>
                        <div class="rowItem">
                            <img src="https://i8.mifile.cn/v1/a1/eb5024fe-dfe3-6e53-3e18-675bef5fa06e.webp" />
                        </div>
                        <div class="rowItem">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6eb2a9a73687e007daf30fc3f85e0ad2.gif"/>
                        </div>
                        <div  class="rowItem">
                            <img src="https://i8.mifile.cn/v1/a1/e8bc849a-0a3b-21a0-6810-7da3a3903dee.webp" />
                        </div>
                        <div class="rowItem">
                            <img src="https://i8.mifile.cn/v1/a1/7dbcbf87-6a58-adb6-2f3f-bb3dae3e9c80.webp" />
                        </div>

                    </div>
                    <div class="row">
                        <div class="rowItem">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cb65daec7ef7b52cc785f88f78efba37.png?thumb=1&w=144&h=152"/>
                        </div>
                        <div class="rowItem">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b14da225c4156d5ce9a78e42a3a5a8e7.jpg?thumb=1&w=144&h=152"/>
                        </div>
                        <div class="rowItem">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ff6d920e80a63e80edb21febdb266448.png?thumb=1&w=144&h=152"/>
                        </div>
                        <div class="rowItem">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1510a665adba1d56e1a5045be77fe546.png?thumb=1&w=144&h=152"/>
                        </div>
                        <div class="rowItem">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bc1c677a6e10e42d00fb0a063662fbf9.png?thumb=1&w=144&h=152"/>
                        </div>
                    </div>
                </div>
                <div class="mobile">
                    <div  class="mobileItem">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/323d6cf16f74fbf3874257ca6830ee2f.jpg?thumb=1&w=358&h=508"/>
                    </div>
                    <div class="mobileItem">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/014b00755fa78532e20d9302ae320b2b.jpg?thumb=1&w=358&h=252"/>
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fd45154d62474d1e395fef17d21ec918.jpg?thumb=1&w=358&h=252"/>
                    </div>
                </div>
                <button @click="addMenuItem()" v-show="false">添加分类</button>
            </section>
        </main>
        <footer>
            <div class="btnItems" v-for="item in btnItems" @click="selectBtn(item.index)" :class="{btnActive:btnSelect==item.index}">
                <span class="icon" v-html="item.icon"></span>
                <span style="font-size: 14px">{{ item.text }}</span>
            </div>
        </footer>
    </div>

</body>
<script>
    new Vue({
        el:"#app",
        data:{
            message:"hello",
            index:1,
            btnSelect:1,
            menuItems:[{name:"手机", index:1},
                {name:"电视", index:2},
                {name:"手表", index:3},
                {name:"上衣", index:4},
                {name:"裤子", index:5},
                {name:"内衣", index:6},
                {name:"手机", index:7},
                {name:"电视", index:8},
                {name:"手表", index:9},
                {name:"上衣", index:10},
                {name:"裤子", index:11},
                {name:"内衣", index:12},

            ],
            btnItems:[{
                icon:"&#xe63d;",
                text:"定位",
                index: 1
            },{
                icon:"&#xe644;",
                text:"护盾",
                index: 2
            },{
                icon:"&#xe640;",
                text:"搜索",
                index: 3
            },{
                icon:"&#xe649;",
                text:"语音",
                index: 4
            }],
        },
        methods:{
            addMenuItem(){
                let length = this.menuItems.length + 1;
                this.menuItems.push({name:"菜单"+length, index:length});
            },

            selectItem(index){
                this.index = index
            },
            selectBtn(index){
                this.btnSelect = index;
                for (let item of this.btnItems) {
                    if (item.index == index) {
                        let v = document.createElement("input");
                        v.value = item.text;
                        document.body.appendChild(v);
                        v.select();
                        document.execCommand("Copy");
                        v.style.display = "none";
                        document.body.removeChild(v);
                        break
                    }
                }
            }
        }
    })
</script>
</html>